<template>
  <div class="no-search-content">
    <div v-if="language == LANGUAGE.ZH" class="title mb-16">
      抱歉，未找到" <span class="red"> {{ keyword }} </span> " 相关结果
    </div>
    <div v-if="language != LANGUAGE.ZH" class="title mb-16">
      សូមទោស " <span class="red"> {{ keyword }} </span> " មិនត្រូវបានរកឃើញ
    </div>

    <div class="content">
      <img
        src="@/assets/images/tip_yellow.png"
        alt=""
        class="img img-cover mr-4"
      />
      <div>
        <p class="mb-8">{{ $t('reminder') }}</p>
        <p class="mb-8">
          {{ $t('please_check_whether_the_input_is_correct') }}
        </p>
        <p>{{ $t('try_again_after_changing_keywords') }}</p>
      </div>
    </div>
  </div>
</template>

<script>
import { LANGUAGE } from '@/constants/index';

export default {
  data() {
    return {
      LANGUAGE
    };
  },

  computed: {
    language() {
      return this.$store.state.app.language;
    },
    keyword() {
      return this.$store.state.app.searchContent;
    }
  }
};
</script>

<style lang="scss" scoped>
.no-search-content {
  .red {
    color: #fd4b49;
  }
  .title {
    font-size: 20px;
    color: #0c0c1c;
    letter-spacing: 0;
    line-height: 32px;
    font-weight: 500;
  }

  .content {
    background: rgba(250, 174, 70, 0.16);
    border-radius: 8px;
    padding: 12px 16px;
    display: flex;

    .img {
      width: 16px;
      height: 16px;
    }

    p {
      font-size: 12px;
      color: rgba(12, 12, 28, 0.7);
      letter-spacing: 0;
      line-height: 16px;
    }
  }
}
</style>
